Next.js入門 2 ルーティングの仕組み

Next.jsがReact.jsコンポーネントをどのようにルーティングしているのかを触りながら理解していきましょう

Next.jsのルーティングの一番基本的な仕組み：pages/以下にあるファイルでexport defaultされたコンポーネントがそのファイル名のURLで表示される

pages/index.tsxはパス/で表示される

以降はVSCodeでの作業です

code:pages/index.tsx

export default function Home() {

return (

<div>

<h1>hello</h1>

</div>

)

}

以降はブラウザでの作業です

変更結果を確認してみる

https://gyazo.com/17fe03cfc260afd9ca32163b2dbd19c8

こういう画面が表示されるはずです！！

入れ子になったディレクトリもパスに反映される

以降はVSCodeでの作業です

以下をコピペします

code:pages/hoge/test.tsx

const Page = () => {

return (

<div>

<h1>test</h1>

</div>

);

};

export default Page;

以降はブラウザでの作業です

変更結果を確認してみる

https://gyazo.com/61f379ceeedd92f3a6268a9d0ef134fa

こういう画面が表示されるはずです！！

Next.jsの便利な仕組み：動的なルーティングへの対応もファイル名ベースで実現

以降はVSCodeでの作業です

以下をコピペします

import { useRouter } from "next/dist/client/router"

const Page = () => {

const router = useRouter();

const { name } = router.query;

return (

<div>

<h1>{name}さん、こんにちは</h1>

</div>

);

};

export default Page;

以降はブラウザでの作業です

ダイナミックルーティングの動作を確認してみる

https://gyazo.com/f7bf0d49ba7c33df03a7d4baf5dff019

こういう画面が表示されるはずです！！

https://gyazo.com/86abf18cec15103a239e9b0e168bf5d3

こういう画面が表示されるはずです！！

以上でNext.jsがReact.jsのコンポーネントをどのようにルーティングしているかは理解できたと思います

Next.jsがReact.jsのコンポーネントをいい感じにページとしてルーティングしてくれるのは分かったけど、ページ間の画面遷移はどうするのか

Linkというコンポーネントで画面遷移できます

以降はVSCodeでの作業です

以下をコピペします（一旦ファイルの内容を全部消して上書きします）

code:pages/index.tsx

import Link from 'next/link';

const Page = () => {

return (

<div>

<h1>hello</h1>

<div>

<ul>

{users.map((user) =>{

return (

<li>

<a>

{user}

</a>

</Link>

</li>

)

})}

</ul>

</div>

</div>

)

}

export default Page;

以下のように書き換えましょう（戻るリンクの行を追加するだけ）

import { useRouter } from "next/dist/client/router"

import Link from "next/link";

const Page = () => {

const router = useRouter();

const { name } = router.query;

return (

<div>

<h1>{name}さん、こんにちは</h1>

<Link href='/'><a>戻る</a></Link>

</div>

);

};

export default Page;

以降はブラウザでの作業です

Next.jsのLinkの動作を確認してみる

並んでいる名前をクリックしたり、戻ったりしてみます

https://gyazo.com/a413c0ca3485aba097133bf9a013cc22

以上でNext.jsのルーティング間のリンクによるスムーズな画面遷移について理解できたと思います

Next.jsの公式ドキュメント（日本語訳）

Pagesという概念

Next.js では、ページ(page)というのは pages ディレクトリ内の .js , jsx, .ts, .tsxファイルから export されたReact コンポーネント のことです。 それぞれのページのルーティングはファイル名によって決まります。

通常、Next.js はそれぞれのページを事前にレンダリングします。 つまり、クライアント側の JavaScript でページ全体を生成する代わりに、それぞれのページの HTML をあらかじめ生成します。 プリレンダリングは優れたパフォーマンスと SEO をもたらします。

生成されたそれぞれの HTML には、そのページの生成に最低限必要な JavaScript コードが関連事項づけられています。 ページがブラウザから読み込まれると、JavaScript コードが走りページをインタラクティブなものにします。（この処理はハイドレーションと呼ばれています。）

ルーティング

Next.js はページという概念に基づいて、ファイルシステムに沿ったルーターを持っています。

pages ディレクトリにファイルが追加されたとき、ルートとして自動で使用可能になります。

Next.js のルーターは、シングルページアプリケーションのようにクライアントサイドでのページ間遷移が可能です。

このクライアントサイドでのページ遷移のために、Link という React コンポーネントが提供されています。

動的なルーティング

next/router

アプリ内の関数コンポーネントの中で router オブジェクト へアクセスしたいときは、 useRouter フックを利用できます。